<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>为喜欢的英雄投票</title>
    <link rel="stylesheet" href="__CSS__/vote.css" />
    <link rel="stylesheet" href="__JS__/layui/css/layui.css" />
    <link rel="stylesheet" href="/static/index/js/plugins/layer/skin/layer.css" />
</head>

<body>

<div id="Demo" style="text-align:center;">
    <div id="VoteMain"> </div>
</div>
<input type="hidden"   id="type" value="{$type}">
<input type="hidden" id="uid" value="{$uid}">
<script type="text/javascript" src="__JS__/jquery.min.js"></script>
<script type="text/javascript" src="__JS__/layui/lay/modules/layer.js"></script>
<script type="text/javascript" src="__JS__/layui/layui.js"></script>
<script type="text/javascript">
    layui.use(['layer', 'form'], function(){
        var layer = layui.layer
            ,form = layui.form;
        // var index = layer.load(0, {shade: false}); //0代表加载的风格，支持0-2
    });
</script>
<script type="text/javascript">
    $(document).ready(function(e) {
        //$(".VoteValue").css("margin-top",$(this).hei
        Vote.Init();
    });

    var Vote={
        voteJson:[
            {Name:"李青",Img:"/static/index/images/LeeSin.png",Value:160},
            {Name:"阿狸",Img:"/static/index/images/Ahri.png",Value:160},
            {Name:"娑娜",Img:"/static/index/images/Sona.png",Value:160},
            {Name:"嘉文四世",Img:"/static/index/images/JarvanIV.png",Value:160}
        ],
        Init:function(){
            for(var i=0;i<Vote.voteJson.length;i++){
                var mName=Vote.voteJson[i].Name;
                var mImg=Vote.voteJson[i].Img;
                var mValue=Vote.voteJson[i].Value;
                var VoteItem=$("<div></div>");
                VoteItem.attr("class","VoteItem");
                $("#VoteMain").append(VoteItem);

                var VoteImg=$("<img title=\"支持一下\" src=\""+mImg+"\" />");
                VoteImg.attr("class","VoteImg");
                VoteImg.click(function(){
                    $(this).next().css("height",$(this).next().height()+1+"px");
                    $(this).next().css("margin-top",300-20-$(this).next().height()+"px");
                    $(this).next().find(".VoteSpan").html($(this).next().height());
                    var VoteSpanTri=$("<span></span>");
                    VoteSpanTri.attr("class","VoteSpanTri");
                    $(this).next().find(".VoteSpan").append(VoteSpanTri);
                });
                VoteItem.append(VoteImg);

                var VoteValue=$("<div></div>");
                VoteValue.attr("class","VoteValue");
                VoteValue.css("margin-top",300-20-mValue+"px");
                VoteValue.animate({height:mValue+"px"},500);
                VoteItem.append(VoteValue);

                var VoteSpan=$("<div>"+mValue+"</div>");
                VoteSpan.attr("class","VoteSpan");
                VoteValue.append(VoteSpan);

                var VoteSpanTri=$("<span></span>");
                VoteSpanTri.attr("class","VoteSpanTri");
                VoteSpan.append(VoteSpanTri);


                var VoteText=$("<p></p>");
                VoteText.html(mName);
                VoteText.attr("class","VoteText");
                VoteItem.append(VoteText);
                VoteImg.click(function(){
                    var data =JSON.stringify(Vote.voteJson);
                    var type =$('#type').val();
                    var uid =$('#uid').val();
                    document.cookie="voteJson="+ data;
                    // console.log(JSON.stringify(Vote.voteJson));
                    layer.confirm('你参与活动成功!', {
                        btn: ['确定'] //按钮
                    }, function(){
                        layer.msg('欢迎下次参于!',{
                            offset:['50%'],
                            time: 2000, //2秒关闭（如果不配置，默认是3秒）
                            icon: 6
                        },function(){
                            window.location.href="{:url('/vote/results')}?uid='"+uid+"'&type='"+type+"'";
                        });
                    });
                });
            }
        }
    }
</script>

</body>
</html>

